<template>
  <div>
    <div style="padding: 20px">
      <el-card>
        <!-- 搜索条件 -->
        <el-row style="display: flex; align-items: center; padding: 15px 0;">
          <span>企业名称：</span>
          <el-input
              placeholder="请输入企业名称"
              class="w-200"
              v-model="state.where.orgName"
          />

          <el-button class="btn ml10" type="primary" @click="page.load">
            <el-icon><elementSearch/></el-icon>
            搜索
          </el-button>
          <el-button class="btn" @click="page.reset">
            <el-icon><elementRefreshRight/></el-icon>
            重置
          </el-button>
          <el-row>
            <el-button class="btn ml10"
                       type="primary"
                       @click="page.add()">
              <el-icon>
                <elementPlus/>
              </el-icon>
              新增
            </el-button>
          </el-row>
        </el-row>
          <ld-table
              ref="tableRef"
              url="/api/project/reserveProject/query/page"
              :columns="reserveProject.column"
              :where="state.where"
              :isTableTitle="false"
              :isShowData="true"
              :isPage="true"
          >
            <template #orgName="scope">
              <span
                  style="cursor: pointer; color: #409eff;"
                  @click="page.openForm({ id: scope.row.id })"
              >{{ scope.row.orgName }}</span>
            </template>
            <template #action="scope">
              <el-link
                  class="ml10"
                  size="small"
                  type="primary"
                  :underline="false"
                  @click="page.openForm({ id: scope.row.id })"
              >
                编辑
              </el-link>
              <el-link
                  class="ml10"
                  size="small"
                  type="primary"
                  :underline="false"
                  @click="page.remove({ id: scope.row.id })"
              >
                删除
              </el-link>
            </template>
          </ld-table>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import {getEntity, remove} from "/@/api/project/reserveProject";
import {ElMessage} from "element-plus";

const reserveProject = {
  column: [
    { prop: "categoryId", label: "分类",width: 150 },
    { prop: "orgName", label: "企业名称", slot: "orgName",width: 250, align:'left' },
    { prop: "regTime", label: "成立时间",width: 120 },
    { prop: "regCapital", label: "注册资金（万元）",width: 200 },
    { prop: "honorsQualifications", label: "荣誉资质",width: 200 },
    { prop: "intellectualProperty", label: "知识产权" ,width: 200},
    { prop: "technicalField", label: "技术领域" ,width: 200, showOverflowTooltip: true},
    { prop: "developmentStage", label: "成果阶段" ,width: 200},
    { prop: "projectLeaderFounder", label: "负责人/创始人" ,width: 120},
    { prop: "leaderAffiliation", label: "所在单位" ,width: 120},
    { prop: "potentialIndustries", label: "潜在应用行业",width: 200, showOverflowTooltip: true },
    { prop: "applicationScenario", label: "应用场景",width: 200 , showOverflowTooltip: true},
    { prop: "solution", label: "解决方案",width: 200 , showOverflowTooltip: true},
    {
      prop: "action",
      label: "操作",
      slot: "action",
      width: 120,
      fixed: "right" //
    }
  ]
};

const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const tableRef = ref();

const state = reactive({
  where: {
    orgName: "",
    technicalField: "",
    developmentStage: "",
    orderColumn: "create_time",
    orderFormat: "desc",
  }
});

const page = {
  add:() => {
    page.openForm();
  },
  reset: () => {
    state.where.orgName = "";
    state.where.technicalField = "";
    state.where.developmentStage = "";
  },
  load: () => {
    tableRef.value.load();
  },
  openForm: (params?: object) => {
    router.push({
      name: "formReserveProject",
      query: params
    });
  },
  remove: async (params?: { id: string }) => {
    try {
      const confirmed = await proxy.$wigem.confirm("是否删除？");
      if (!confirmed) return;

      const delRes = await remove(params.id);
      if (delRes.success) {
        ElMessage.success("删除成功");
        await page.load();
      } else {
        ElMessage.error("删除失败");
      }
    } catch (error) {
      // 用户取消或请求异常
      if (error !== 'cancel') {
        console.error(error);
        ElMessage.error("删除操作出错");
      }
    }
  }

};
</script>

<style lang="scss" scoped>
::v-deep(.el-card__body) {
  padding: 10px 20px 0 30px;
}

.custom-tabs {
  display: flex;
  gap: 10px;
  font-size: 20px;

  .custom-tab-btn {
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
  }

  .custom-tab-btn.active {
    color: #409eff;
    border-bottom: 2px solid #409eff;
  }
}
</style>
